<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /> 
  <meta name="renderer" content="webkit" />
   <link href="css/default.css"  rel="stylesheet">
   <link href="css/common.css"  rel="stylesheet">

</head>
<style>
.all{overflow:hidden;padding-bottom:30px;}
.all .lilter{float:left;width:50%;height:300px;}
.all .lilter .title{width:80px;margin:0 auto;}
.all .center{float:left;width:100%;height:300px;}
.all .center .title{width:80px;margin:0 auto;}
</style>
<body>


<div class="all">
	<div class="lilter"><div  id="one" style="width:100%;height:100%"></div><div class="title">二次访问率</div></div>
	<div class="lilter"><div  id="two" style="width:100%;height:100%"></div><div class="title" style="width:130px;">入口渠道分析</div></div>
	<div class="center"><div  id="center" style="width:100%;height:100%"></div><div class="title" style="width:130px;">访问统计同比</div></div>
	<div class="lilter"><div  id="three" style="width:100%;height:100%"></div><div class="title" style="width:130px;">咨询量统计</div></div>
	<div class="lilter"><div  id="four" style="width:100%;height:100%"></div><div class="title" style="width:80px;">出货数量</div></div>
</div>

  <script src="js/jq.js" ></script>
    <script src="js/echarts.min.js"></script>
  <script>
  $(function(){
		one();
		two();
		center();
		three();
		four();
  })
  
  function one(){
	// 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('one'));

        // 指定图表的配置项和数据
        var option = {
				tooltip : {
					formatter: "{a} <br/>{b} : {c}%"
				},
				toolbox: {
					feature: {
						restore: {},
						saveAsImage: {}
					},
					show:false
				},
				series: [
					{
						name: '业务指标',
						type: 'gauge',
						detail: {formatter:'{value}%'},
						data: [{value: 75}]
					}
				]
			};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		
	}
	
	
	  function two(){
	// 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('two'));

        // 指定图表的配置项和数据
        var option = {
				toolbox: {
					show:false
				},
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				series : [
					{
						name: '访问来源',
						type: 'pie',
						radius : '55%',
						center: ['50%', '50%'],
						data:[
							{value:335, name:'直接访问'},
							{value:310, name:'邮件营销'},
							{value:234, name:'联盟广告'},
							{value:135, name:'视频广告'},
							{value:1548, name:'搜索引擎'}
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		
	}
	
	  function center(){
	// 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('center'));

        // 指定图表的配置项和数据
        var option = {
			tooltip : {
				trigger: 'axis',
				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			toolbox: {
					show:false
				},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					data : ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
				}
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : [
				{
					name:'2016年',
					type:'bar',
					data:[100, 52, 200, 334, 390, 330, 220]
				},
				{
					name:'2017年',
					type:'bar',
					data:[200, 82, 20, 134, 190, 390, 270]
					}
				
			]
		};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);	
	}
	
		  function three(){
	// 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('three'));

        // 指定图表的配置项和数据
        var option = {
			color: ['#0099ff'],
			tooltip : {
				trigger: 'axis',
				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			toolbox: {
					show:false
				},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
					axisTick: {
						alignWithLabel: true
					}
				}
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : [
				{
					name:'直接访问',
					type:'bar',
					barWidth: '60%',
					data:[10, 52, 200, 334, 390, 330, 220],
					itemStyle:{
                                    normal:{
                                        color:'#0099ff'
                                    }
                                }
				}
			]
		};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);	
	}
	
		function four(){
	// 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('four'));

        // 指定图表的配置项和数据
        var option = {
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data:['出货量'],
					bottom:0
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '10%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					},
					show:false
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['周一','周二','周三','周四','周五','周六','周日']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name:'出货量',
						type:'line',
						stack: '总量',
						data:[120, 132, 101, 134, 90, 230, 210]
					}
				]
			};


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);	
	}
	
	
  </script>
  </body>
</html>